<template>
  <div class="chat-group-detail" v-loading="loading">
    <div class="search-wrap" v-if="detail.isGroup">
      <el-input
          v-model="keywords"
          style="width: 100%"
          placeholder="搜索群成员"
          :prefix-icon="Search"
      />
    </div>
    <div class="users-wrap">
      <div class="user-item" v-for="(item, index) in detail.users" :key="'u'+index"
           :class="index>=11 && moreHideSate ? 'hide-item' : ''" @click="handleUserCard(item, $event)">
        <el-image :src="item.avatar"/>
        <p class="font-12 align-center">{{ item.name }}</p>
      </div>
      <div class="user-item add-user">
        <el-icon class="add-icon">
          <ele-Plus/>
        </el-icon>
        <p class="font-12 align-center">添加</p>
      </div>
      <div class="show-more cur-pointer color-info" @click="moreHideSate = !moreHideSate"
           v-if="detail.users.length > 11">
        <p v-if="moreHideSate">
          查看更多&nbsp;
          <el-icon>
            <ele-ArrowDown/>
          </el-icon>
        </p>
        <p v-else>
          收起&nbsp;
          <el-icon>
            <ele-ArrowUp/>
          </el-icon>
        </p>
      </div>
    </div>
    <div class="cus-divider" v-if="detail.isGroup"></div>
    <div class="menu-wrap" v-if="detail.isGroup">
      <div class="menu-item">
        <p>群聊名称</p>
        <div>仅群主或管理员可以修改</div>
      </div>
      <div class="menu-item">
        <p>群公告</p>
        <div>群主未设置</div>
      </div>
      <div class="menu-item">
        <p>备注</p>
        <div>群聊的备注尽自己可见</div>
      </div>
      <div class="menu-item">
        <p>我在本群昵称</p>
        <div>{{ detail.myNickName }}</div>
      </div>
    </div>
    <div class="cus-divider"></div>

    <div class="other-wrap">
      <div class="other-item cur-pointer" @click="handleChatHistory">
        <span>聊天记录</span>
        <el-icon class="color-info">
          <ele-ArrowRight/>
        </el-icon>
      </div>
    </div>

    <div class="cus-divider"></div>

    <div class="act-wrap">
      <div class="act-item" v-if="detail.isGroup">
        <span>显示群成员昵称</span>
        <el-switch
            v-model="detail.showNickname"
            inline-prompt
            :active-value="true"
            :inactive-value="false"
            active-text=""
            inactive-text=""/>
      </div>

      <div class="act-item">
        <span>消息免打扰</span>
        <el-switch
            v-model="detail.notDisturb"
            inline-prompt
            :active-value="true"
            :inactive-value="false"
            active-text=""
            inactive-text=""/>
      </div>

      <div class="act-item">
        <span>置顶聊天</span>
        <el-switch
            v-model="detail.isTop"
            inline-prompt
            :active-value="true"
            :inactive-value="false"
            active-text=""
            inactive-text=""/>
      </div>
    </div>

    <div class="cus-divider"></div>
    <div class="quit-group color-danger align-center cur-pointer font-16" v-if="detail.isGroup">
      退出群聊
    </div>
    <!--    用户弹框卡片-->
    <div ref="chatUserCardWrapRef">
      <ChatUserCard v-if="showUserCardState" :user="currentUser" :position="cardPosition"
                    @handle-close="showUserCardState = false"/>
    </div>
    <!--    用户弹框卡片-->
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs, ref, nextTick, onMounted} from 'vue';
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
import {Search} from "@element-plus/icons-vue";
import {getGroupDetail} from "/@/api/imapi";
import ChatUserCard from "/@/components/chat/ChatUserCard.vue";

export default defineComponent({
  name: 'ChatGroupDetail',
  components: {ChatUserCard},
  computed: {
    Search() {
      return Search
    }
  },
  props: {
    groupId: {
      type: String,
      default: () => '',
    },
  },
  setup(props, {emit}) {
    const chatHistoryRef = ref();
    const chatUserCardWrapRef = ref();
    const stores = useUserInfo();
    const {userInfos} = storeToRefs(stores);
    const state = reactive({
      keywords: null,
      loading: true,
      showName: 0,
      moreHideSate: true,
      showUserCardState: false,
      detail: {
        isGroup: true,
        groupId: '',
        name: '测试去哪',
        users: [],
        isAdmin: false,
        isTop: false,
        notDisturb: false,
        groupNotice: null,
        myNickname: null,
        showNickname: true,
      },
      cardPosition: {
        top: '0px',
        left: '0px'
      },
      currentUser: {}
    });
    const handleChatHistory = () => {
      emit('callback')
    }
    const getGroupInfo = () => {
      state.loading = true;
      getGroupDetail({groupId: props.groupId, uid: userInfos.value.hash}).then(res => {
        state.detail = res.data;
        state.loading = false;
      })
    }
    const handleUserCard = (_user:any, event: any) => {
      emit('handleUserCard', {user: _user, event: event})
    }
    onMounted(() => {
      nextTick(() => {
        getGroupInfo();
      })
    })
    return {
      chatHistoryRef,
      chatUserCardWrapRef,
      userInfos,
      ...toRefs(state),
      handleChatHistory,
      handleUserCard,
    };
  },
});
</script>


<style scoped lang="scss">
.chat-group-detail {
  width: 100%;

  .search-wrap {
    margin-bottom: 20px;
  }

  .users-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;

    .user-item {
      width: 25%;
      padding: 8px;

      p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .add-user {
      .add-icon {
        border: 1px solid #e6e6e6;
        text-align: center;
        width: 38.8px;
        height: 38.8px;
        margin-bottom: 3px;
      }
    }

    .hide-item {
      display: none;
    }

    .show-more {
      width: 100%;
      font-size: 14px;
      padding: 5px 0;

      p {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
      }
    }
  }

  .cus-divider {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #EFEFEF;
  }

  .menu-wrap {
    .menu-item {
      padding: 8px 0;

      div {
        color: grey;
        margin-top: 5px;
      }
    }
  }

  .other-wrap {
    .other-item {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;

      span:last-child {
        color: grey;
      }
    }
  }

  .act-wrap {
    .act-item {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: space-between;
    }
  }

}
</style>
